<template>
    <div>
        <!-- 卡片一：扫二维码 -->
        <div class="card bg-light mt-3">
            <div class="card-body d-flex">
                <img :src="param.user_weixin_url" width="120px" alt="">
                <div class="ms-5">
                    <p>&bull; 技术干货分享</p>
                    <p>&bull; 免费资料领取</p>
                    <p class="fw-bolder">&bull; 扫码领取更多惊喜</p>
                </div>
            </div>
        </div>

        <!-- 卡片二：联系方式 -->
        <div class="card bg-light mt-3">
            <div class="card-body">
                <h5>社交</h5>
                <hr />
              <p>QQ: {{ param.user_weixin_no }}</p>
              <p>邮箱:{{param.user_email }}</p>
            </div>
        </div>

        <!-- 广告图 -->
        <img class="mt-3" :src="param.ad_url" alt="" style="height: 130px; width: 100%;">

        <!-- 卡片三：文章分类 -->
        <div class="card bg-light mt-3">
            <div class="card-body">
                <h5>分类</h5>
                <hr />

              <p v-for="v in articleTypeGroups">
                <a :href="'./index.html?typeId='+v.typeId" class="card-link text-decoration-none text-primary">
                  {{v.typeName}} <span style="color: gray">({{v.count}})</span>
                </a>
              </p>
            </div>
        </div>

        <!-- 卡片四：归档 -->
        <div class="card bg-light mt-3">
            <div class="card-body">
                <h5>归档</h5>
                <hr />
                <p v-for="v in createGroups">
                    <a :href="'./blog-archives.html?time='+v.time" class="card-link text-decoration-none text-primary">
                      {{ v.time }} <span style="color: gray">({{v.count}})</span>
                    </a>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
module.exports = {
    data() {
        return {
          //文章类型分组
          articleTypeGroups:[],
          //归档时间分组
          createGroups:[],
          //参数
          param: {}
        };
    },
    methods: {
      //获取参数对象
      paramInfo(){
        this.$http.get("/param").then(res=>{
          let{success,resultObj} = res.data;
          if(success){
            this.param = resultObj;
          }
        })
      },
      //文章类型分组
      loadArticleGroups(){
        this.$http.patch("/article/group").then(res=>{
          let{success,resultObj} = res.data;
            if(success){
               this.articleTypeGroups = resultObj;
            }
        })
      },
      //归档时间分组
      createGroup(){
        this.$http.patch("/article/createGroup").then(res=>{
          let{success,resultObj} = res.data;
          if(success){
            this.createGroups = resultObj;
          }
        })
      }
    },
    mounted() {
      //文章类型分组
       this.loadArticleGroups();
      //归档时间分组
       this.createGroup();
       //获取参数对象
      this.paramInfo();
    },
}
</script>

<style></style>